<!--按钮操作-->
<template>
  <el-tooltip class="item" effect="dark" :content="!disabled?title:'无['+title+']操作权限!'" placement="bottom">
    <el-button v-if="!disabled" :type="type" :icon="icon" :class="'button-option-'+skin" @click="click">
      <svg-icon v-if="iconType=='svg'" :icon-class="icon" />
      <slot />
    </el-button>
    <el-button v-if="disabled" :type="type" :icon="icon" :class="'button-option-default'">
      <svg-icon v-if="iconType=='svg'" :icon-class="icon" />
      <slot />
    </el-button>
  </el-tooltip>
</template>
<script>
export default {
  name: 'ButtonOption',
  props: {
    title: {
      type: String,
      default: '请配置[title]属性'
    },
    type: {
      type: String,
      default: 'text'
    },
    icon: {
      type: String,
      default: 'default'
    },
    skin: {
      type: String,
      default: 'default'
    },
    iconType: {
      type: String,
      default: 'icon'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    click() {
      this.$emit('click')
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/styles/variables.scss';
  .button-option-default{
    color: $colorDefault;
  }
  .button-option-danger{
    color: $colorDanger;
  }
  .button-option-success{
    color: $colorSuccess;
  }
  .button-option-primary{
    color: $colorPrimary;
  }
  .button-option-warning{
    color: $colorWarning;
  }
</style>
